import React from "react";
import { Button } from "antd";
import classnames from "classnames";
import "./index.scss";

interface IVFontAlignPickerProps {
    value: string;
    onChange: (value: string) => void;
}

const VFontAlignPicker: React.FC<IVFontAlignPickerProps> = (props) => {
    const getBtnClassnames = (defaultClass: string, key: string) => {
        const { value} = props;
        return classnames(defaultClass, {
            "active-btn": value === key
        })
    }
    return <div className="v-font-align-group-wrapper">
        <Button className={getBtnClassnames("left-btn", "left")} onClick={() => props.onChange("left")}>左</Button>
        <Button className={getBtnClassnames("center-btn", "center")} onClick={() => props.onChange("center")}>中</Button>
        <Button className={getBtnClassnames("right-btn", "right")} onClick={() => props.onChange("right")}>右</Button>
    </div>
}

export default VFontAlignPicker;